<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div v-loading="loading">
        <div class="myheader">
            <div class="part-left">
                {{ currentItem.title }}
            </div>
            <div class="part-right">
                <div class="block">
                    <el-button size="small" icon="el-icon-arrow-left" @click="$emit('back')">返回</el-button>
                </div>
                <div class="block">
                    <el-button size="small" :disabled="!hasFront" icon="el-icon-arrow-up" @click="frontHandle">上一条</el-button>
                </div>
                <div class="block">
                    <el-button size="small" :disabled="!hasNext" icon="el-icon-arrow-down" @click="nextHandle">下一条</el-button>
                </div>
                <div class="block">
                    <el-button size="small" type="danger" icon="el-icon-delete" @click="deleteHandle">删除</el-button>
                </div>
            </div>
        </div>
        <el-divider></el-divider>
        <div class="mycontent">
            <div class="mes-box">
                <div class="header">
                    <div class="title">{{ currentItem.title }}</div>
                    <div class="date">{{ currentItem.created_at }}</div>
                </div>
                <el-divider></el-divider>
                <vue-markdown :source="currentItem.content" />

                <el-button v-if="currentItem.url" class="btn" type="primary"
                    @click="gotoRouter">查看详情</el-button>
            </div>

        </div>

    </div>
</template>

<script>
import VueMarkdown from 'vue-markdown';
import {
    getWebNoticeList,
    deleteWebNotice,
    readWebNotice,
    getWebNoticeCat,
    getWebNoticeNextOrFront,
    getWebNoticeDetail,
} from "@/api/web-notice";
export default {
    name: "itemDetail",
    components: { VueMarkdown, },
    props: {
        currentItemId: { type: Number, default: null },
    },

    data() {
        return {
            show: false,
            loading: false,
            currentItem: {
                title: '',
                created_at: '',
                content: '',
            },
            hasNext: false,
            hasFront: false,
        };
    },
    computed: {
    },
    watch: {
        currentItemId(newVal, oldVal) {
            if (!newVal) {
                return
            }
            this.loadData(newVal)
        }
    },
    methods: {
        gotoRouter() {
            this.$router.push(this.currentItem.url)
        },
        deleteHandle() {
            var msg =
                "您确定要删除这条数据吗？";
            this.$confirm(msg, "删除确认").then((resp) => {
                this.loading = true;
                deleteWebNotice(this.currentItem.id).then((resp) => {
                    this.loading = false;
                    if (resp.status != 0) {
                        return
                    }
                    this.$message.success("已删除");
                    this.$emit('back')
                });
            });
        },
        nextHandle() {
            this.loading = true
            getWebNoticeNextOrFront(this.currentItem.id, 'next').then(resp => {
                this.loading = false
                if (resp.status != 0) {
                    return
                }
                readWebNotice(resp.data).then(res => {
                    if (res.code != 0) {
                        return
                    }
                    this.$store.dispatch("user/getUnreadNotice");
                })

                this.loadData(resp.data)
            })
        },
        frontHandle() {
            this.loading = true
            getWebNoticeNextOrFront(this.currentItem.id, 'front').then(resp => {
                this.loading = false
                if (resp.status != 0) {
                    return
                }
                readWebNotice(resp.data).then(res => {
                    if (res.code != 0) {
                        return
                    }
                    this.$store.dispatch("user/getUnreadNotice");
                })

                this.loadData(resp.data)
            })
        },
        loadData(id){
            this.loading = true
            getWebNoticeDetail(id).then(resp => {
                this.loading = false
                if (resp.status != 0) {
                    return
                }
                this.currentItem = resp.data.data
                this.hasNext = resp.data.hasNextItem
                this.hasFront = resp.data.hasFrontItem
            })
        },
    },
};
</script>

<style scoped lang="scss">
.myheader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    // padding: 20px 0px;

    .part-right {
        display: flex;
        justify-content: flex-end;
        align-items: center;

        .block {
            margin-left: 10px;
        }
    }

    .part-left {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 20px;
        font-weight: bold;

        .block {
            margin-right: 10px;
        }
    }
}

.mycontent {
    width: 80%;
    border-radius: 4px;
    background: #F4F4F4;
    padding: 50px;
    margin: 0 auto;
    max-width: 960px;

    .mes-box {
        width: 100%;
        padding: 30px 30px 30px 30px;
        background: #FFFFFF;
        border-radius: 0px 0px 0px 0px;
        border-top: 3px solid #1989FA;

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .title {
                font-size: 18px;
                font-weight: bold;
                color: #333;
            }

            .date {
                font-size: 14px;
                color: #999999;
                width: 260px;
                text-align: right;
                flex-shrink: 0;
            }
        }

        .btn {
            width: 100%;
            margin-top: 30px;
        }
    }
}
</style>
